<template>
  <div>
    <el-form v-show="!successFlag" ref="billInfo" status-icon :model="billInfo" :rules="billRule" :inline="true" label-width="100px" label-position="right">
      <el-card>
        <el-form-item label="客户名字" prop="c_value">
          <!--<el-input v-model="billInfo.customerName"></el-input>-->
          <el-autocomplete
            v-model="billInfo.c_value"
            :fetch-suggestions="queryCustomer"
            placeholder="请输入内容"
            @select="selectCustomer"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="联系电话" prop="c_phone">
          <el-input v-model="billInfo.c_phone"></el-input>
        </el-form-item>
        <el-form-item label="发货时间">
          <el-date-picker type="date" class="w185" placeholder="选择日期" v-model="billInfo.deliverGoodsTime"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="收货省/市/区" prop="c_p_c_a">
          <!--<el-input v-model="billInfo.destination" style="width:400px"></el-input>-->
          <el-cascader
            style="width: 244px"
            :options="Area"
            v-model="billInfo.c_p_c_a"
            @change="selectProvince">
          </el-cascader>
        </el-form-item>
        <el-form-item label="街道" prop="c_street">
          <el-input v-model="billInfo.c_street" style="width:400px"></el-input>
        </el-form-item>
        <el-form-item label="发往目的地" prop="destination">
          <el-input v-model="billInfo.destination" style="width:400px"></el-input>
        </el-form-item>
        <hr class="by-split-line">
        <div class="clear"></div>
        <el-form-item label="货运部名字" prop="f_value">
          <!--<el-input v-model="billInfo.freight"></el-input>-->
          <el-autocomplete
            v-model="billInfo.f_value"
            :fetch-suggestions="queryFreight"
            placeholder="请输入货运部名字"
            @select="selectFreight"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="货运部电话" prop="f_phone">
          <el-input v-model="billInfo.f_phone"></el-input>
        </el-form-item>
        <el-form-item label="货运部地址">
          <el-input v-model="billInfo.f_address" style="width:400px"></el-input>
        </el-form-item>
        <hr class="by-split-line">
        <el-form-item label="订单类型">
          <el-select v-model="billInfo.orderType" class="w172" filterable placeholder="请选择">
            <el-option v-for="item in $store.state.orderType" :key="item.value" :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单总额">
          <el-input type="number" v-model="billInfo.totalMoney" placeholder="单位：元"></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select v-model="billInfo.payWay" class="w172" filterable placeholder="请选择">
            <el-option v-for="item in $store.state.payWay" :key="item.value" :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="billInfo.payStatus" class="w172" filterable placeholder="请选择">
            <el-option v-for="item in $store.state.payStatus" :key="item.value" :label="item.name"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="押金">
          <el-input type="number" v-model="billInfo.deposit" placeholder="单位：元"></el-input>
        </el-form-item>
      </el-card>
      <el-card>
        <el-tabs v-model="activeName" @tab-click="tabClick">
          <el-tab-pane label="餐椅" name="chair">
            <div style="display: flex">
              <el-form-item label="餐椅型号">
                <el-select v-model="billInfo.chairInfo.type" class="w172" filterable placeholder="请选择">
                  <el-option v-for="(item,index) in $store.state.chairList" :key="index" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="餐椅颜色">
                <el-select v-model="billInfo.chairInfo.color" class="w172" filterable placeholder="请选择">
                  <el-option v-for="(item,index) in $store.state.colorList" :key="index" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="坐板类型">
                <el-select v-model="billInfo.chairInfo.board" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.boardList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="餐椅数量">
                <el-input type="number" v-model="billInfo.chairInfo.number" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="餐椅单位">
                <el-select v-model="billInfo.chairInfo.unit" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.unitList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="餐桌" name="table">
            <div style="display: flex">
              <el-form-item label="桌架型号">
                <el-select v-model="billInfo.tableInfo.type" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tableList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="桌架颜色">
                <el-select v-model="billInfo.tableInfo.color" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="桌架尺寸">
                <el-select v-model="billInfo.tableInfo.size" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tableSizeList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="桌架数量">
                <el-input type="number" v-model="billInfo.tableInfo.number" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="桌架材质">
                <el-select v-model="billInfo.tableInfo.material" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tableFooterMaterialList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="桌脚名称">
                <el-select v-model="billInfo.tableInfo.footer" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tableFooterAppearanceList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="桌脚材质">
                <el-select v-model="billInfo.tableInfo.footerMaterial" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tableFooterMaterialList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="台面型号">
                <el-select v-model="billInfo.tableInfo.desktop" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="茶几" name="teaTable">
            <div style="display: flex">
              <el-form-item label="茶几型号">
                <el-select v-model="billInfo.teaTableInfo.type" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.teaTableList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="茶几颜色">
                <el-select v-model="billInfo.teaTableInfo.color" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="茶几尺寸">
                <el-select v-model="billInfo.teaTableInfo.size" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.teaTableSizeList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="茶几数量">
                <el-input type="number" v-model="billInfo.teaTableInfo.number" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="台面型号">
                <el-select v-model="billInfo.teaTableInfo.desktop" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="电视柜" name="tvTable">
            <div style="display: flex">
              <el-form-item label="电视柜型号">
                <el-select v-model="billInfo.tvTableInfo.type" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tvTableList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电视柜颜色">
                <el-select v-model="billInfo.tvTableInfo.color" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.colorList" :key="item.value" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="电视柜尺寸">
                <el-select v-model="billInfo.tvTableInfo.size" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.tvTableSizeList" :key="item.value" :label="item.name"
                             :value="item"></el-option>

                </el-select>
              </el-form-item>
            </div>
            <div style="display: flex">
              <el-form-item label="电视柜数量">
                <el-input type="number" v-model="billInfo.tvTableInfo.number" placeholder=""></el-input>
              </el-form-item>
              <el-form-item label="台面型号">
                <el-select v-model="billInfo.tvTableInfo.desktop" class="w172" filterable placeholder="请选择">
                  <el-option v-for="item in $store.state.desktopList" :key="item.value" :label="item.value+'('+item.name+')'"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="备注" name="remark">
            <div style="display: flex">
              <el-form-item label="备注">
                <el-input type="textarea"
                          resize
                          :autosize="{ minRows: 3,minCols: 38}"
                          v-model="billInfo.remarkInfo.remark"
                          style="width:1000px"
                ></el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-row class="mb15">
          <el-col :span="5" style="text-align: center">
            <el-button type="primary" @click="addBillInfo">添加到订单</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card>
        <table class="el-table el-table--border by-table">
          <tr>
            <th style="width: 100px">产品</th>
            <th>订单详细信息</th>
            <th>操作</th>
          </tr>
          <tr>
            <td>餐椅</td>
            <td class="by-box-pd-12">
              <el-row v-for="(o,index) in previewChair" :key="index+1" style="text-align: left">
                <el-checkbox></el-checkbox>
                <span>{{index+1+'，'}}</span>
                <el-tag type="success">
                  <span>{{'餐椅型号: '+Tools.isUdf(o.type.value)}}</span>
                  <span>( {{Tools.isUdf(o.type.name)+'，'+Tools.isUdf(o.color.name)}} )</span>
                </el-tag>
                <el-tag type="warning">
                  <span>{{'数量: '+Tools.isUdf(o.number)+' '+Tools.isUdf(o.unit.name)}}</span>
                </el-tag>
                <el-tag>
                  <span>{{'坐板: '+Tools.isUdf(o.board.name)}}</span>
                </el-tag>
              </el-row>

            </td>
            <td style='width:200px'>
              <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
              <el-button type="primary" size='small' icon="el-icon-delete">删除</el-button>
            </td>
          </tr>
          <tr>
            <td>餐桌</td>
            <td class="by-box-pd-12">
              <el-row v-for="(o,index) in previewTable" :key='index+1' style="text-align: left">
                <el-checkbox></el-checkbox>
                <span>{{index+1+'，'}}</span>
                <el-tag type="success">
                  <span>{{'桌架型号: '+Tools.isUdf(o.type.value)}}</span>
                  <span class="r10">( {{Tools.isUdf(o.type.name)+'，'+ Tools.isUdf(o.material.name)+','+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</span>
                </el-tag>
                <el-tag type="warning">
                  <span class="r10">{{'数量: '+Tools.isUdf(o.number)+'套'}}</span>
                </el-tag>
                <el-tag>
                  <span class="r10">{{'桌脚型号:'+Tools.isUdf(o.footer.name)+'，'+Tools.isUdf(o.footerMaterial.name)}}</span>
                </el-tag>
                <el-tag type="success">
                  <span>{{'台面(大理石):'+Tools.isUdf(o.desktop.value)+'('+Tools.isUdf(o.desktop.name)+')'}}</span>
                </el-tag>
              </el-row>
            </td>
            <td style='width:200px'>
              <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
              <el-button type="primary" size='small' icon="el-icon-delete">删除</el-button>
            </td>
          </tr>
          <tr>
            <td>茶几</td>
            <td class="by-box-pd-12">
              <el-row v-for="(o,index) in previewTeaTable" :key="index+1" style="text-align: left">
                <el-checkbox></el-checkbox>
                <span>{{index+1+'，'}}</span>
                <el-tag type="success">
                  <span>{{'茶几型号: '+Tools.isUdf(o.type.value)}}</span>
                  <span>( {{Tools.isUdf(o.type.name)+'，'+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</span>
                </el-tag>
                <el-tag type="warning">
                  <span>{{'数量: '+Tools.isUdf(o.number)+'个'}}</span>
                </el-tag>
                <el-tag>
                  <span>{{'茶几台面型号: '+Tools.isUdf(o.desktop.value)+'('+Tools.isUdf(o.desktop.name)+')'}}</span>
                </el-tag>
              </el-row>
            </td>
            <td style='width:200px'>
              <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
              <el-button type="primary" size='small' icon="el-icon-delete">删除</el-button>
            </td>
          </tr>
          <tr>
            <td>电视柜</td>
            <td class="by-box-pd-12">
              <el-row v-for="(o,index) in previewTvTable" :key="index+1" style="text-align: left">
                <el-checkbox></el-checkbox>
                <span>{{index+1+'，'}}</span>
                <el-tag type="success">
                  <span>{{'电视柜型号: '+Tools.isUdf(o.type.value)}}</span>
                  <span>( {{Tools.isUdf(o.type.name)+'，'+Tools.isUdf(o.color.name)+'，'+Tools.isUdf(o.size.name)}} )</span>
                </el-tag>
                <el-tag type="warning">
                  <span>{{'数量: '+Tools.isUdf(o.number)+'个'}}</span>
                </el-tag>
                <el-tag>
                  <span>{{'电视柜台面型号: '+Tools.isUdf(o.desktop.value)+ '('+Tools.isUdf(o.desktop.name)+')'}}</span>
                </el-tag>
              </el-row>
            </td>
            <td style='width:200px'>
              <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
              <el-button type="primary" size='small' icon="el-icon-delete">删除</el-button>
            </td>
          </tr>
          <tr>
            <td>备注</td>
            <td class="by-box-pd-12">
              <el-row>
                <div v-for="(o,index) in previewRemark" :key="index" class="text item">
                  <el-tag type="success" style="margin-bottom: 8px">
                    <span class="by-span">{{index+1+'， '+o.remark}}</span>
                  </el-tag>
                </div>
              </el-row>
            </td>
            <td style='width:200px'>
              <el-button type="primary" size='small' icon="el-icon-edit">编辑</el-button>
              <el-button type="primary" size='small' icon="el-icon-delete">删除</el-button>
            </td>
          </tr>
        </table>
      </el-card>

      <el-row style="margin-bottom: 8px">
        <el-col :span="5" :offset="19" style="text-align: center">
          <!--<el-button type="primary" @click="geet" v-loading.fullscreen.lock="fullScreenLoading">创建订单</el-button>-->
          <el-button type="primary" @click="testForm">创建订单</el-button>
          <el-button type="primary" @click="resetConfirm">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="submit-success-box" v-show="successFlag">
      <h1>创建订单成功</h1>
    </div>
  </div>
</template>

<script type="text/javascript">
  import Area from '~/data/area'
  import * as utils from '@/utils'
  import * as orderValidate from '@/utils/orderValidate'
  import { Message } from 'element-ui'
  import NProgress from 'nprogress' // progress bar
  import { addBillInfo, queryCustomer, queryFreight } from '@/api/order/create'

  export default {
    created: function() {
    },
    data() {
      return {
        successFlag: false,
        Area: Area,
        activeName: 'chair',
        fullScreenLoading: false,
        chairCheckList: [1, 1, 1, 1],
        desktopCheckList: [],
        previewChair: [],
        previewTable: [],
        previewDesktop: [],
        previewTeaTable: [],
        previewTvTable: [],
        previewRemark: [],
        chairList: this.$store.state.chairList,
        loading: false,
        billRule: {
          c_phone: [{ required: true, trigger: 'change', validator: orderValidate.phone }],
          f_phone: [{ required: true, trigger: 'change', validator: orderValidate.phone }],
          c_p_c_a: [{ required: true, trigger: 'change', validator: orderValidate.isNull }]
        },
        billInfo: {
          // customerInfo: { value: '', phone: '', id: '', p_c_a: '', street: '' },
          // freightInfo: { value: '', phone: '', address: '', id: '' },
          c_value: '', c_phone: '', c_id: '', c_p_c_a: [], c_street: '',
          f_value: '', f_phone: '', f_id: '', f_address: '', id: '',
          deliverGoodsTime: '',
          orderType: '',
          totalMoney: '',
          deposit: '',
          destination: '',
          area: [],
          p_c_a: [],
          street: '',
          payWay: '',
          payStatus: '',
          chairInfo: {
            type: '',
            name: '',
            color: '',
            number: '',
            unit: '',
            board: ''
          },
          tableInfo: {
            type: '',
            name: '',
            number: '',
            size: '',
            color: '',
            material: '',
            footer: '',
            footerMaterial: '',
            desktop: ''
          },
          desktopInfo: {
            type: '',
            name: '',
            number: '',
            size: ''
          },
          teaTableInfo: {
            type: '',
            name: '',
            number: '',
            size: '',
            color: '',
            desktop: ''
          },
          tvTableInfo: {
            type: '',
            name: '',
            color: '',
            size: '',
            number: '',
            desktop: ''
          },
          remarkInfo: {
            remark: ''
          }
        }
      }
    },
    mounted() {
      console.log(utils.parseTime(new Date('2/13/18'), '{y}-{m}-{d}'))
    },
    methods: {
      // 获取用户名称
      queryCustomer(queryString, cb) {
        const that = this
        queryCustomer(queryString).then(res => {
          if (res.success) {
            // 当手输入时，清空相关信息
            that.billInfo.c_phone = ''
            that.billInfo.c_p_c_a = []
            that.billInfo.c_street = ''
            cb(res.data)
          }
        })
      },
      // 选取用户
      selectCustomer(item) {
        // 将后台返回数据展示是在页面
        console.log('选择的item', item)
        this.billInfo.c_phone = item.phone
        this.billInfo.c_id = item.id
        this.billInfo.c_p_c_a = item.p_c_a ? item.p_c_a.split('_') : []
        this.billInfo.c_street = item.street
      },
      // 省市区查询
      selectProvince(value) {
        this.billInfo.p_c_a = value
      },
      // 获取货运部信息
      queryFreight(queryString, cb) {
        const that = this
        queryFreight(queryString).then(res => {
          if (res.success) {
            // 每次选择都清空相应数据
            that.billInfo.f_phone = ''
            that.billInfo.f_address = ''
            console.log('freight', res.data)
            cb(res.data)
          }
        })
      },
      // 选择货运部
      selectFreight(item) {
        this.billInfo.f_id = item.id
        this.billInfo.f_phone = item.phone
        this.billInfo.f_address = item.address
      },
      onSubmit() {
        console.log('submit!')
      },
      handleClick(row) {
        console.log(row)
      },
      tabClick(tab, event) {
        console.log(tab, event)
        console.log('event', event)
        console.log('tab', tab.name)
        console.log('active', this.activeName)
      },
      /**
       * 添加信息到预览表
       */
      addBillInfo() {
        let obj = {}
        //  当前操作 产品信息 对象
        const t = this.billInfo[this.activeName + 'Info']
        obj = this.Tools.getNewObj(t)
        this['preview' + this.Tools.firstUpperCase(this.activeName)].push(obj)
        console.log('添加对象', obj)
        this.Tools.toNull(t)
      },
      testForm() {
        const that = this
        this.$refs.billInfo.validate(valid => {
          console.log('表单验证', valid)
          if (valid) {
            if (that.previewChair.length === 0 && that.previewTable.length === 0 && that.previewTeaTable === 0 && that.previewTvTable === 0) {
              Message.info('未添加任何产品信息！')
            } else {
              that.geet()
            }
          } else {
            Message.error('请完整填写订单信息！')
          }
        })
      },
      geet() {
        const that = this
        this.fullScreenLoading = true
        // 判断当前是手输还是从数据库获取
        const billInfoAll = {
          deliverGoodsTime: this.billInfo.deliverGoodsTime,
          destination: this.billInfo.destination,
          orderType: this.billInfo.orderType,
          deposit: this.billInfo.deposit,
          totalMoney: this.billInfo.totalMoney,
          payWay: this.billInfo.payWay,
          payStatus: this.billInfo.payStatus,
          chairInfo: this.Tools.getAttribute(this.previewChair),
          tableInfo: this.Tools.getAttribute(this.previewTable),
          teaTableInfo: this.Tools.getAttribute(this.previewTeaTable),
          tvTableInfo: this.Tools.getAttribute(this.previewTvTable),
          remarkInfo: this.previewRemark
        }
        if (this.billInfo.c_id) {
          billInfoAll.customerInfo = {
            id: that.billInfo.c_id
          }
        } else {
          billInfoAll.customerInfo = {
            id: that.billInfo.c_id,
            value: that.billInfo.c_value,
            phone: that.billInfo.c_phone,
            p_c_a: that.billInfo.c_p_c_a,
            street: that.billInfo.c_street
          }
        }
        if (this.billInfo.f_id) {
          billInfoAll.freightInfo = {
            id: that.billInfo.f_id
          }
        } else {
          billInfoAll.freightInfo = {
            id: that.billInfo.f_id,
            value: that.billInfo.f_value,
            phone: that.billInfo.f_phone,
            address: that.billInfo.f_address
          }
        }
        // 添加运单
        NProgress.start()
        addBillInfo(billInfoAll).then(res => {
          // 这页面 采用加载情况
          const that = this
          this.fullScreenLoading = false
          NProgress.done()
          console.log(res)
          if (res.success) {
            that.resetOrder()
            that.successFlag = true
            setTimeout(function() {
              that.$notify({
                title: '成功',
                message: res.message,
                type: 'success'
              })
            }, 100)
          } else {
            setTimeout(function() {
              that.$notify.error({
                title: '失败',
                message: res.message
              })
            }, 100)
          }
        })
      },
      // 重置运单信息
      resetOrder() {
        this.billInfo.customerName = ''
        this.billInfo.customerPhone = ''
        this.billInfo.deliverGoodsTime = ''
        this.billInfo.p_c_a = []
        this.billInfo.street = ''
        this.billInfo.freight = ''
        this.billInfo.freightPhone = ''
        this.billInfo.freightAddress = ''
        this.previewChair = []
        this.previewTable = []
        this.previewTeaTable = []
        this.previewTvTable = []
        this.previewRemark = []
      },
      //  重置订单信息
      resetConfirm() {
        this.$confirm('重置订单信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.resetOrder()
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        })
      }
    }
  }
</script>

<style type="text/scss" scoped>
  .w172{
    width: 172px !important;
  }
  .el-row {
    margin-bottom: 20px
  }

  .el-row:last-child {
    margin-bottom: 0
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  hr {
    margin: 0;
    padding: 0;
  }
  .el-table{
    text-align: center;
    font-size: 14px;
  }
  .el-table th {
    text-align: center !important;
  }
</style>
